<template lang="">
  <div id="login">
    <video id="login_video" autoplay="autoplay" preload="preload" loop="loop">
      <source src="@/assets/video/welcome.mp4" type="video/mp4" />
    </video>
    <div class="login_main">
      <img :src="logoWhite" class="login_logo" />
      <div class="login_form">
        <ul>
          <li>
            <span class="icon">
              <i class="anticon anticon-user">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="user"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              type="text"
              :placeholder="$t('yong')"
              maxlength="20"
              v-model="formData.user_name"
            />
            <p class="red" style="display: none">{{ $t("520G") }}</p>
          </li>
          <li>
            <span class="icon">
              <i class="anticon anticon-lock">
                <svg
                  viewBox="64 64 896 896"
                  data-icon="lock"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"
                  ></path>
                </svg>
              </i>
            </span>
            <input
              type="password"
              :placeholder="$t('miMa')"
              maxlength="15"
              v-model="formData.password"
            />
            <p class="red" style="display: none">{{ $t("815G") }}</p>
          </li>
          <li>
            <a-row>
              <a-col :span="18">
                <a-input
                  v-model:value="formData.captcha_code"
                  style="width: 100%"
                  :placeholder="$t('qing-0')"
                />
              </a-col>
              <a-col :span="6" style="background-color: #fff">
                <img
                  v-if="verifyImgUrl"
                  @click="changeVerifyImageUrl"
                  style="height: 40px; width: 100px"
                  :src="verifyImgUrl"
                />
              </a-col>
            </a-row>
          </li>
          <li style="margin-bottom: 16px">
            <a-button type="primary" size="large" @click="submitLogin">{{
              $t("deng")
            }}</a-button>
          </li>
          <li>
            <a class="left" @click="gotoForgotPasswordPage">{{ $t("wang") }}</a>
            <a class="right primary_color" @click="gotoRegisterPage">{{
              $t("liJi")
            }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { getLoginCaptchaId, userlLogin } from "@/api/account";
import { reactive, ref, unref, watch, onBeforeMount } from "vue";
import { generateMd5, getAssetsImages } from "@/utils";
import { setToken } from "@/utils/token";
import { RetweetOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const code = ref<string>("");
const verifyImgUrl = ref<string>("");
const captcha_id = ref<string>("");
const checked = ref<boolean>(true);
const buildParameter = () => {
  return {
    user_name: "",
    password: "",
    captcha_id: "",
    captcha_code: "",
  };
};

const router = useRouter();

let formData = reactive(buildParameter());

onBeforeMount(() => {
  getVerifyImageUrl();
});

const getVerifyImageUrl = async () => {
  getLoginCaptchaId().then((res: any) => {
    if (res?.captcha_id) {
      captcha_id.value = res?.captcha_id as string;
      const url = `${
        import.meta.env.VITE_API_BASEPATH
      }/api/v1/admin/login.captcha?id=${res.captcha_id}&reload=false`;
      verifyImgUrl.value = url;
    }
  });
};

function changeVerifyImageUrl() {
  getVerifyImageUrl();
}
function gotoRegisterPage() {
  router.push("/register");
}
function gotoForgotPasswordPage() {
  router.push({ name: "ForgotPassword" });
}
function submitLogin() {
  if (!formData.user_name) {
    message.warn(t("qing-1"));
    return;
  }
  let reg = /^[a-zA-Z0-9]{5,20}$/;
  console.log(!reg.test(formData.user_name))
  if (!reg.test(formData.user_name)) {
    message.warn(t("yong-0"));
    return;
  }


  if (!formData.password) {
    message.warn(t("qing-2"));
    return;
  }

  if (!formData.captcha_code) {
    message.warn(t("qing-3"));
    return;
  }

  if (formData.password.length < 8) {
    message.warn(t("miMa-0"));
    return;
  }
  const data = {
    ...formData,
    password: generateMd5(formData.password),
    captcha_id: captcha_id.value,
  };
  userlLogin(data).then((data: any) => {
    if (data.access_token) {
      message.success(t("deng-0"));
      setToken(data.access_token);
      // 跳转到登录页面
      Object.assign(formData, buildParameter());
      // 调整首页
      router.push("/");
      setTimeout(() => {
        window.location.reload();
      }, 300);
    }
  });
}
const logoWhite = getAssetsImages("logo_white.png");
</script>
<style lang="less">
@import url("../../styles/login.less");
</style>
